<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div>
      <h1>克隆优化节点操作</h1>
    </div>
    <p id="box1">box</p>
    <script>
      //克隆节点优于普通的
      for (var i = 0; i < 10; i++) {
        var oP = document.createElement("p");
        oP.innerHTML = i;
        document.body.appendChild(oP);
      }

      //优化--节点克隆
      var oldP = document.getElementById("box1");
      for (var i = 0; i < 10; i++) {
        var newP = oldP.cloneNode(false);
        newP.innerHTML = i;
        document.body.appendChild(newP);
      }
    </script>
  </body>
</html>
